<template>
	<view class="wrap">
		<view class="header u-flex u-p-l-40 w100 u-row-between text-white u-col-top" style="padding-top: 120upx;height: 200px;">
			<navigator :url="'/pages/center/member_info'" hover-class="none" v-if="login==true && userinfo">
				<view class=" u-flex u-col-center ">
					<image class="logo-img1" style="background-color: #fff; border-color: #fff;" :src="(userinfo.badgeimgurl!='' && userinfo.badgeimgurl!=undefined) ? userinfo.badgeimgurl :avatarUrl"></image>
					<view class="">
						<text class="uer-name" style="font-size: 36upx;font-weight: bold;">{{userinfo.realname}}</text>
						<view>
							<view class="u-p-t-20 mid">
								<image :src="userinfo.level.icon" style="width: 40upx;height: 40upx;"></image><text class="u-p-l-10">{{userinfo.level.str}}</text>
							</view>
						</view>
					</view>
				</view>
			</navigator>
			<navigator :url="'/pages/login/login'" hover-class="none" v-else="">
				<view class=" u-flex u-col-center ">
					<image class="logo-img1" style="background-color: #fff; border-color: #fff;" :src="avatarUrl"></image>
					<view class="">
						<text class="uer-name" style="font-size: 30upx;font-weight: bold;">请登录</text>
					</view>
				</view>
			</navigator>
			<view class="u-p-r-30"><u-icon name="setting" class="u-font-40 u-p-20" @click="goSecurity"></u-icon></view>
		</view>
		<view class=" u-p-l-30 u-p-r-30 w100 " v-if="userinfo.level" style="flex-direction:column;margin-top: -80upx;">
			<view class="radius u-p-20" style="background-color: #3A3534;">
			<view class="u-flex " style="width: 100%;">
				<image class="u-m-r-15" :src="userinfo.level.icon" style="width: 50upx;height: 40upx;"></image>
				<u-line-progress :striped-active="true" :striped="true" :percent="level.jindu" :round="true" :active-color="level.color"></u-line-progress>
				<image v-if="level.icon" class="u-m-l-15" :src="level.icon" style="width: 50upx;height: 40upx;"></image>
			</view>
			<view class=" u-font-10 u-m-t-20 mid text-white" v-if="level.sheng"><text>距离升级还需要办理{{level.sheng}}个案件</text></view>
			</view>
		</view>
		<view class="">
			<view class="u-m-30 bg-white radius"> 
				<view class="u-flex u-col-center u-row-between u-p-20">
					<view class="title_t text-bold">预审案件</view>
					<view class="u-flex u-col-center mid " @click="goDetails('')">
						<text>全部案件</text> <u-icon name="arrow-right" class="u-p-l-10"></u-icon>
					</view> 
				</view>
				<view class="u-flex u-row-around u-p-t-14 u-p-b-24">
					<view class="u-relative u-p-t-14" @click="goDetails(0)">
						<view style="margin: auto;">
							<view style="margin-top: -20upx;">
								<view class="text-center">
									<image src="../../static/image/pre1.png" style="width: 42upx; height: 42upx;"></image>
								</view>
							</view>
							<view>
								初审中
							</view> 
						</view>
						<u-badge type="error" :count="app_config.count.preorder0||0" class="u-absolute" style="right:0;top:0"></u-badge>
					</view>
					<view class="u-relative u-p-t-14" @click="goDetails(3)">
						<view style="margin: auto;">
							<view style="margin-top: -20upx;">
								<view class="text-center">
									<image src="../../static/image/pre2.png" style="width: 42upx; height: 42upx;"></image>
								</view>
							</view>
							<view>
								待回访
							</view>
						</view>
						<u-badge type="info" :count="app_config.count.preorder3||0" class="u-absolute" style="right:0;top:0"></u-badge>
					</view>
					<view class="u-relative u-p-t-14" @click="goDetails(1)">
						<view style="margin: auto;">
							<view style="margin-top: -20upx;">
								<view class="text-center">
									<image src="../../static/image/pre3.png" style="width: 42upx; height: 42upx;"></image>
								</view>
							</view>
							<view>
								可受理
							</view>
						</view>
						<!-- <u-badge type="error" :count="app_config.count.order0||0" class="u-absolute" style="right:0;top:0"></u-badge> -->
					</view>
					<view class="u-relative u-p-t-14" @click="goDetails(2)">
						<view style="margin: auto;">
							<view style="margin-top: -20upx;">
								<view class="text-center">
									<image src="../../static/image/pre4.png" style="width: 38upx; height: 42upx;"></image>
								</view>
							</view>
							<view>
								未通过
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 30upx;">
			<view class= "u-m-30 bg-white radius">
				<view class="u-flex u-col-center u-row-between u-p-20">
					<view class="title_t text-bold">我的案件</view>
					<view class=" " @click="goDetails1('')">
						<text>全部案件</text> <u-icon name="arrow-right" class="u-p-l-10"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-around u-p-t-14 u-p-b-24">
					<view class="u-relative u-p-t-14" @click="goDetails1(0)">
						<view style="margin: auto;">
							<view style="margin-top: -20upx;">
								<view class="text-center">
									<image src="../../static/image/order1.png" style="width: 42upx; height: 42upx;"></image>
								</view>
							</view>
							<view>
								待受理
							</view>
						</view>
						<u-badge type="error" :count="app_config.count.order0||0" class="u-absolute" style="right:0;top:0"></u-badge>
					</view>
					<view class="u-relative u-p-t-14" @click="goDetails1(3)">
						<view style="margin: auto;">
							<view style="margin-top: -20upx;">
								<view class="text-center">
									<image src="../../static/image/order2.png" style="width: 42upx; height: 42upx;"></image>
								</view>
							</view>
							<view class="">
								受理中
							</view>
						</view>
						<u-badge type="error" :count="app_config.count.order3||0" class="u-absolute" style="right:0;top:0"></u-badge>
					</view>
					<view class="u-relative u-p-t-14" @click="goDetails1(1)">
						<view style="margin: auto;">
							<view style="margin-top: -20upx;">
								<view class="text-center">
									<image src="../../static/image/order3.png" style="width: 42upx; height: 42upx;"></image>
								</view>
							</view>
							<view>
成功结案
							</view>
						</view>
						<!-- <u-badge type="info" :count="app_config.count.order1||0" class="u-absolute" style="right:0;top:0"></u-badge> -->
					</view>
					<view class="u-relative u-p-t-14" @click="goDetails1(2)">
						<view style="margin: auto;">
							<view style="margin-top: -20upx;">
								<view class="text-center">
									<image src="../../static/image/order4.png" style="width: 42upx; height: 42upx;"></image>
								</view>
							</view>
							<view>
								失败结案
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="margin-top text-333">
			<view class= "u-m-30 bg-white radius">
				<u-cell-group>
					<u-cell-item icon="" title="预审申请" @click="toaddorder()"></u-cell-item>
					<navigator url="/pages/article/platform_details?_id=usinghelp&title=使用帮助" hover-class="none">
						<u-cell-item icon="" title="使用帮助" value=""></u-cell-item>
					</navigator>
					<navigator url="/pages/article/platform_details?_id=hotline&title=客服热线" hover-class="none">
						<u-cell-item icon="" title="客服热线"></u-cell-item>
					</navigator>
					<navigator url="/pages/article/platform_details?_id=aboutapp&title=关于APP" hover-class="none">
						<u-cell-item icon="" title="关于APP" value=""></u-cell-item>
					</navigator>
				</u-cell-group>
			</view>
		</view>
		<view class="text-center">
			<u-link href="http://www.geomall.cn">玖猫软件提供技术支持</u-link>
		</view>
		<app-update ref="app_update" :force="true" :tabbar="false"></app-update>
		<u-tabbar :list="vuex_tabbar" :mid-button="true" :before-switch="beforeSwitch" inactive-color="#cecece" active-color="#2979ff"></u-tabbar>
	</view>
</template>

<script>
import appUpdate from "@/components/yzhua006-update/app-update.vue" // 版本检测升级
	export default {
		components: {
			appUpdate
		},
		data() {
			return {
				list: [],
				avatarUrl: "../../static/image/no_login.png",
				login:false,
				app_config:{
					count:{}
				},
				level:{
					jindu:0,
					sheng:0,
					color:'#ff9900'
				},
				userinfo:''
				// desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
			}
		},
		computed: {
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			},
			desc() {
				return this.$t('template.desc');
			}
		},
		onLoad() {
		},
		onShow() {
			this.login = false;
			try { 
				//从本地缓存中同步获取指定 key 对应的内容。
				const value = uni.getStorageSync('userinfo');
				if (value && value.length != 0) {
					this.userinfo = value;
					this.login = true;
					this.getData();
				} else {
					this.userinfo = ''
				}
				uni.stopPullDownRefresh();
				if(this.$refs.app_update)this.$refs.app_update.update();  //调用子组件 检查更新
			} catch (e) {
				// error
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			init(){
				this.login = false;
				try { 
					//从本地缓存中同步获取指定 key 对应的内容。
					const value = uni.getStorageSync('userinfo');
					if (value && value.length != 0) {
						this.userinfo = value;
						this.login = true;
						this.getData();
					} else {
						this.userinfo = '';
						uni.stopPullDownRefresh();
					}
				} catch (e) {
					// error
				}
			},
			beforeSwitch(index) {
				// 只能切换偶数项
				if(index == 1){
					uni.scanCode({
						success: function(res) {
							uni.navigateTo({
								url: "/pages/center/authorized?content=" + res.result
							});
							return;
						}
					});
				}else{
					return true;
				};
			},
			getData() {
				var _this = this;
				var arr = {};
				this.$u.api.getUserInfo({_id:this.userinfo._id}).then(res=>{
					uni.setStorageSync('userinfo',res.data);
					this.userinfo = res.data;
				})
				_this.$u.api.getUserLevel(arr).then(res=>{
					_this.level = {
						jindu:100,
						sheng:0
					}

					res.data.map(r=>{
						if(r.level == (parseInt(_this.userinfo.level.id)+1)){
							_this.level = {
								jindu:(_this.userinfo.exp/r.exp*100),
								sheng:r.exp - _this.userinfo.exp,
								icon:r.icon
							}
						}
						if(_this.userinfo.level.id == 1){
							_this.level.color= "#e2be84"
						}
						if(_this.userinfo.level.id == 2){
							_this.level.color= "#ed4087"
						}
						if(_this.userinfo.level.id == 3){
							_this.level.color= "#f18e4b"
						}
						if(_this.userinfo.level.id == 4){
							_this.level.color= "#d03923"
						}
						if(_this.userinfo.level.id == 5){
							_this.level.color= "#884a99"
						}
					})
					_this.userlevel = res.data;
				})
				this.$u.api.getOrderIndex(arr).then(res=>{
					this.app_config = res.data;
					this.xShow = true;
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
			goSecurity() {
				var isvisit = this.goLogin();
				if(isvisit)return console.log('游客需请先登录');
				uni.navigateTo({
					url: "/pages/center/security"
				})
			},
			goLogin() {
				if (this.userinfo.length == 0) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return true;
				}
				return false;
			},
			goDetails(data) {
				var isvisit = this.goLogin();
				if(isvisit)return console.log('游客需请先登录');
				var curl = "/pages/center/preorder_list?state=";
				uni.navigateTo({
					url: curl + data
				})
			},
			goDetails1(data) {
				var isvisit = this.goLogin();
				if(isvisit)return console.log('游客需请先登录');
				var curl = "/pages/center/order_list"; 
				uni.navigateTo({
					url: curl +'?state='+ data
				})
			},
			toaddorder() {
				var isvisit = this.goLogin();
				if(isvisit)return console.log('游客需请先登录');
				uni.navigateTo({
					url: "/pages/form/addpreorder"
				})
			},
			openPage(path) {
				this.$u.route({
					url: path.indexOf('/page') == 0 ? path : '/pages/template/' + path + '/index'
				})
			},
			getGroupTitle(item) {
				return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
			},
			getFieldTitle(item) {
				return this.$i18n.locale == 'zh' ? item.title : item.title_en
			}
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
	
	.tctj-title {
		width: 100%;
		height: auto;
		float: left;
		border-bottom: 1px #F6F6F6 solid;
		padding-bottom: 15upx;
		font-size: 32upx;
	}
	
	.title_s {
		width: 20upx;
		height: 28upx;
		float: left;
		margin-top: 10upx;
		border-left: #FFCC00 solid 3px;
	}
	
	.title_t {
		width: auto;
		height: auto;
		float: left;
	}
	
	.addcart {
		position: relative;
		z-index: 1000;
		color: white;
		width: auto;
		min-width: 32upx;
		height: 32upx;
		border-radius: 32upx;
		font-size: 26upx;
		right: 0;
	}
	
	.header {
		background-image: url(../../static/image/my-bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	
	.logo-img1 {
		width: 116upx;
		height: 116upx;
		border-radius: 116upx;
		margin-right: 28upx;
	}
	
	.uer-name1 {
		font-size: 24upx;
		color: #fff;
		margin-top: 20upx;
	}
	
	.uer-name1 image {
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;
	}
	
	.my-order {
		width: 92%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10upx;
		/* height: auto; */
	}
	
	.sizeimg {
		width: 60upx;
		height: 60upx;
	}
</style>
